<template>
  <div class="multiple-input">
    <el-tag size="mini" closable type="info" v-for="(item,index) in tags" :key="index" @close="deleteTag(index)" >{{item}}</el-tag>
    <input type="text" v-model="value" class="multiple-input__inner" placeholder="输入公司名，按回车" @blur="saveTag" @keyup.13="saveTag" @keyup.delete="deleteTag(tags.length-1)">
  </div>
</template>

<script>
import { Tag } from 'element-ui'
  export default {
    components: {
      [Tag.name]: Tag
    },
    data () {
      return {
        tags: [],
        value: ''
      }
    },
    methods: {
      saveTag() {
        if(this.value.trim() != ''){
          this.tags.push(this.value);
          this.value = ''
        }
      },
      deleteTag(index) {
        console.log(index)
        this.tags.splice(index, 1)
      }
    }
  }
</script>

<style lang="scss">
.multiple-input{
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    min-height: 32px;
    line-height: 32px;
    outline: 0;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    .el-tag{
      margin: 5px 0 0 5px;
    }
  }
  .multiple-input__inner{
    height: 20px;
    line-height: 20px;
    border: none;
    width: 110px;
    outline: 0;
    display: inline-block;
    padding: 0 10px;
    margin: 5px 0 0 5px;
  }
 
</style>
